<template>
  <div class="home table-box">
    <ProTable
      ref="proTable"
      title="用户列表"
      highlight-current-row
      :columns="columns"
      :request-api="getUserList"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" @click="proTable?.element?.toggleAllSelection">全选</el-button>
        <el-button v-auth="'add'" type="primary" @click="openDrawer('新增')">新增用户</el-button>
        <el-button
          type="danger"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link icon="View" @click="openDrawer('查看', scope.row)"
          >查看</el-button
        >
        <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', scope.row)"
          >编辑</el-button
        >
        <el-button type="primary" link icon="Delete" @click="deleteAccount(scope.row)"
          >删除</el-button
        >
      </template>
    </ProTable>
    <UserDrawer ref="drawerRef" />
  </div>
</template>
<script setup lang="ts">
import { useHandleData } from '@/hooks/useHandleData'
import { User } from './types'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import UserDrawer from './components/UserDrawer.vue'
import { getUserList, getOrgList, getRoleList, deleteUser, addUser, editUser } from './apis'

// ProTable 实例
const proTable = ref<ProTableInstance>()

// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
  { type: 'selection', width: 80 },
  { prop: 'username', label: '用户名', search: { el: 'input' } },
  {
    prop: 'roleName',
    label: '用户角色',
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'roleName', value: 'id' },
    enum: () => getRoleList({}),
    render: (scope: any) => scope.row.roleName
  },
  { prop: 'email', label: '电子邮件', search: { el: 'input' } },
  {
    prop: 'mobile',
    label: '电话号',
    search: { el: 'input' },
    render: (scope: any) => `+${scope.row.mobile.replace('@', ' ')}`
  },
  {
    prop: 'organizationName',
    label: '所属企业',
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'organizationName', value: 'id' },
    enum: () => getOrgList({}),
    render: (scope: any) => scope.row.organizationName
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 230 }
])

// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
  await useHandleData(deleteUser, { id: params.id }, `删除【${params.username}】用户`)
  proTable.value?.getTableList()
}

// 批量删除用户信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(deleteUser, { ids }, '删除所选用户信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null)
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
  const params = {
    title,
    isView: title === '查看',
    row: { ...row },
    api: title === '新增' ? addUser : title === '编辑' ? editUser : undefined,
    getTableList: proTable.value?.getTableList
  }
  drawerRef.value?.acceptParams(params)
}
</script>

<style lang="less" scoped>
.home {
  .big {
    height: 800px;
  }
  p {
    color: var(--v-3);
  }
  span {
    color: var(--v-4);
  }
}
</style>
